<template>
	<a-drawer title="编辑院系招生计划"  width=650 placement="right" :closable="false" @close="onClose"
	 :visible="departmentsEditVisiable" style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
		<a-form>
			<a-row :gutter="48">
				<a-col :sm="{span:12}" :md="{span:12}">
					<a-form-item label='院系'>
						<a-select :allowClear="true" showSearch optionFilterProp="children" v-model='postParams.zsyxm' disabled >
							<a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{i.dwh+"-"+  i.dwmc }}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :sm="{span:12}" :md="{span:12}">
					<a-form-item label='招生年度'>
						<a-select :allowClear="true" showSearch optionFilterProp="children" v-model='postParams.zsnj' :disabled="!status">
							<a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :sm="{span:12}" :md="{span:12}">
					<a-form-item label='学习形式'>
						<a-select :allowClear="true" showSearch optionFilterProp="children" v-model='postParams.qrzhfqrz' :disabled="!status">
							<a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-table ref="table" size="default" rowKey="key" bordered :columns="columns" :dataSource="data" :pagination="false">
				<template slot="plan" slot-scope="text, record">
					<a-input style="margin: -5px 0" :value="text.plan" @change="e => handleChange(record.key,'plan',e.target.value)" :disabled="!status"/>
				</template>
			</a-table>
			<a-form-item label='备注' style="margin-top:20px">
				<a-textarea placeholder="请输入..." v-model="postParams.note" :disabled="!status"/>
			</a-form-item>
		</a-form>
		<div class="drawer-bootom-button">
			<a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
			<a-button @click="handleSubmit" type="primary" :loading="loading" v-if="status">保存</a-button>
		</div>
	</a-drawer>
</template>

<script>
	// import moment from 'moment'
	import {
		STable
	} from '~'
	import {
		mapState
	} from 'vuex'

	const formItemLayout = {
		labelCol: {
			span: 3
		},
		wrapperCol: {
			span: 18
		}
	}

	const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']
	export default {
		name: 'DepartmentsEdit',
		props: {
			info: {
				default: () => ({
					hzfs: '',
					zjh: '',
					fzyxwjh: '',
					zyxwjh: '',
					bz: ''
				})
			},
      status:{
			  default: true
      },
			departmentsEditVisiable: {
				default: false
			}
		},
		components: {
			STable
		},
		data() {
			return {
				formItemLayout,
				loading: false,
				data: [],
				postParams: {
					zsyxm: '',
					zsnj: '',
					qrzhfqrz: ''
				},
				// 表头
				columns: [{
						title: '',
						dataIndex: 'column'
					},
					{
						title: '计划',
						scopedSlots: {
							customRender: 'plan'
						}
					},
					{
						title: '已分配',
						dataIndex: 'distribution'
					}
				],
				selectMenu: {
					yx: [], // 院系
					zy: []
				}
			}
		},
		computed: {
			...mapState({
				systemInfo: state => state.app.systemInfo,
				TYPE0126: state => state.app['TYPE0126'] // 年级
			})
		},
		watch: {
			info(val) {
				// console.log(val)
				this.postParams = {
					zsyxm: val.zsyxm,
					zsnj: val.zsnj,
					qrzhfqrz: val.qrzhfqrz,
					note: val.note
				}
				this.data = [{
					column: '总计划',
					plan: val.zszjhrs,
					distribution: val.zsyfpzrs ? val.zsyfpzrs : 0,
					key: 'zszjhrs'
				}, {
					column: '学术学位计划',
					plan: val.fzyxwjhrs,
					distribution: val.fzyxwyfprs ? val.fzyxwyfprs : 0,
					key: 'fzyxwjhrs'
				}, {
					column: '专业学位计划',
					plan: val.zyxwjhrs,
					distribution: val.zyxwyfprs ? val.zyxwyfprs : 0,
					key: 'zyxwjhrs'
				}]
			}
		},
		created() {
			this.initSelectMenu()
			selectArr.forEach(v => {
				this.$store.dispatch('app/setDictionary', v)
			})
		},
		methods: {
			initSelectMenu() {
				let allRequest = [
					this.$api.base.collegeAll()
				]
				Promise.all(allRequest).then(res => {
					this.selectMenu.yx = res[0].data
				})
				this.$api.base.dictionaryData('TYPE0441').then(res => {
					this.selectMenu.zy = res.data
				})
			},
			reset() {
				this.data = [{
					column: '总计划',
					plan: '',
					distribution: 1,
					key: 'zjh'
				}, {
					column: '学士学位计划',
					plan: '',
					distribution: 1,
					key: 'fzyxwjh'
				}, {
					column: '专业学位计划',
					plan: '',
					distribution: 1,
					key: 'zyxwjh'
				}]
			},
			// 选择院系
			yxChange(code) {
				this.$set(this.queryParam, 'sszym', '')
        this.$set(this.selectMenu, 'zy', [])
        if(code){
          this.$api.base.majorAll({
            lsdwh: code
          }).then(res => {
            this.$set(this.selectMenu, 'zy', res.data)
          })
        }
			},
			// 选择招生年度
			zsndChange() {

			},
			// 关闭
			onClose() {
				this.reset()
				this.$emit('close')
			},
			// 保存
			handleSubmit() {
				let paramms = Object.assign({
					zszjhrs: this.data[0].plan,
					fzyxwjhrs: this.data[1].plan,
					zyxwjhrs: this.data[2].plan,
					zsjhlxm: '01',
					id: this.info.id,
					zsyxm: this.postParams.zsyxm,
					zsnj: this.postParams.zsnj,
					qrzhfqrz: this.postParams.qrzhfqrz,
          note : this.postParams.note
				})
				console.log(paramms)
				this.$api.recruitstat.disColleAndDepPlanUpdate(paramms).then(res => {
					this.$emit('success')
				}).finally(() => {
					this.loadingBtn = false
				})
			},
			// 修改各计划人数人数
			handleChange(key, dataIndex, value) {
				const dataSource = [...this.data]
				const target = dataSource.find(item => item.key === key)
				if (target) {
					target[dataIndex] = value
					this.data = dataSource
				}
			}
		}
	}
</script>
